<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <h:form id="order_templates_form">
        <p:outputPanel style="width: 750px; margin: 0 auto;">
            <p:messages globalOnly="true" id="message"/>

            <p:outputPanel layout="block" styleClass="template-panel" style="width: 100%;">
                <h:panelGrid columns="2" columnClasses="order-patterns-col1">
                    <p:selectOneMenu id="order_type_groups" filter="true" filterMatchMode="startsWith" var="o"
                                     converter="#{objectMappingConverter}" style="width: 200px">
                        <f:selectItem itemLabel="Selecteaza grup ordin"
                                      noSelectionOption="true"/>
                        <f:selectItems value="#{orderAdministrationBean.orderTypeGroups}" var="order"
                                       itemLabel="#{order.name}"
                                       itemValue="#{order}"/>

                        <p:column style="width: 10%;">
                            <p:outputPanel layout="block" styleClass="#{o.icon}"/>
                        </p:column>

                        <p:column>
                            <h:outputText value="#{o.name}"/>
                        </p:column>

                        <p:ajax listener="#{orderAdministrationBean.onPatternOrderGroupSelect}"
                                update="order_types patterns_panel actions_btn ckEditor_id" resetValues="true"/>
                    </p:selectOneMenu>

                    <p:selectOneMenu id="order_types" value="#{orderAdministrationBean.selectedOrderType}"
                                     converter="#{objectMappingConverter}" style="width: 250px"
                                     disabled="#{orderAdministrationBean.orderTypes == null}">
                        <f:selectItem itemLabel="Selecteaza tip ordin" noSelectionOption="true"/>
                        <f:selectItems value="#{orderAdministrationBean.orderTypes}" var="o" itemLabel="#{o.name}"
                                       itemValue="#{order}"/>
                        <p:ajax update="actions_btn patterns_panel ckEditor_id"
                                listener="#{orderAdministrationBean.onOrderTypeSelect}" resetValues="true"/>
                    </p:selectOneMenu>

                    <p:splitButton id="actions_btn" value="Sablon nou" styleClass="actions-button"
                                   actionListener="#{orderAdministrationBean.newPatternHandler}"
                                   update="patterns_panel ckEditor_id message"
                                   disabled="#{orderAdministrationBean.selectedOrderType==null}"
                                   resetValues="true" process="@this">
                        <p:menuitem value="Sterge sablon" actionListener="#{orderAdministrationBean.deleteOrderPattern}"
                                    icon="ui-icon-close" process="@this pattern_names"
                                    update="patterns_panel ckEditor_id" resetValues="true"/>
                    </p:splitButton>

                    <p:outputPanel id="patterns_panel" layout="block">
                        <p:watermark for="pattern_names" value="selectati sau introduceti nume"/>
                        <p:selectOneMenu id="pattern_names" editable="true" style="width: 250px;" required="true"
                                         disabled="#{orderAdministrationBean.selectedOrderType==null}">
                            <f:selectItems var="op" value="#{orderAdministrationBean.selectedOrderType.orderPatterns}"
                                           itemLabel="#{op.name}" itemValue="#{op.name}"/>
                            <p:ajax listener="#{orderAdministrationBean.onOrderPatternEvent}" update="ckEditor_id"
                                    process="@this ckEditor_id"/>
                        </p:selectOneMenu>
                    </p:outputPanel>
                </h:panelGrid>
            </p:outputPanel>

            <pe:ckEditor id="ckEditor_id" height="400" value="#{orderAdministrationBean.orderTemplate}" width="750px"
                         contentsCss="../../../../resources/css/order-template.css"
                         customConfig="#{request.contextPath}/resources/js/ckeditor_config.js"
                         readOnly="#{orderAdministrationBean.selectedOrderPattern == null}">

                <p:ajax event="save" process="@this pattern_names" update="patterns_panel message"
                        listener="#{orderAdministrationBean.onEditorSaveEvent}"/>
            </pe:ckEditor>
        </p:outputPanel>
    </h:form>

</ui:composition>